<template>
  <div class="details">
    <el-card shadow="never" :body-style="{ padding: '20px' }">
      <el-steps :active="step" finish-status="success" class="step">
        <el-step title="商品基本信息" />
        <el-step title="添加库存信息" />
        <el-step title="添加移动端详情" />
      </el-steps>
    </el-card>

    <el-card shadow="always" class="card">
      <el-form :model="information" label-width="80px" :inline="false" size="small">
        <!-- 第一部分 -->
        <div v-show="step==1" class="basic">
          <div>基本信息</div>
          <el-divider />
          <el-row :gutter="20">
            <el-col :span="8" :offset="0">
              <el-form-item label="商品名称">
                <el-input v-model="ProductAndSkusVo.product.name" placeholder="商品名称" />
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="商品编码">
                <el-input v-model="ProductAndSkusVo.product.productSn" placeholder="商品编码" />
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="商品分类">
                <el-select v-model="ProductAndSkusVo.product.productCategoryId" placeholder="商品分类">
                  <el-option
                    v-for="item in list"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    @click.native="classification"
                  />
                </el-select>

              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" :offset="0">
              <el-form-item label="商品品牌">
                <el-select v-model="ProductAndSkusVo.product.brandId" placeholder="商品品牌">
                  <el-option
                    v-for="item in brandList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    @click.native="brandChange"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="商品价格">
                <el-input v-model="ProductAndSkusVo.product.price" style="width:60%" placeholder="商品当前价格" />
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="商品库存">
                <el-input v-model="ProductAndSkusVo.product.stock" style="width:60%" placeholder="商品库存" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="商品描述">
            <el-input v-model="ProductAndSkusVo.product.description" type="textarea" placeholder="商品描述" style="width:60%" />
          </el-form-item>
          <div>商品属性</div>
          <el-divider />
          <el-row :gutter="20">
            <el-col :span="8" :offset="0">
              <el-form-item label="商品原价">
                <el-input-number v-model="ProductAndSkusVo.product.originalPrice" size="medium" :min="0" :max="100000" />
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="促销类型">
                <el-input disabled placeholder="没有促销使用原价" style="width:80%" />
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="活动价格">
                <el-input-number v-model="num" size="medium" :disabled="true" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" :offset="0">
              <el-form-item label="重量(kg)">
                <el-input-number v-model="ProductAndSkusVo.product.weight" size="medium" :min="0" :max="100000" />
              </el-form-item>
            </el-col>

            <el-col :span="8" :offset="0">
              <el-form-item label="商品单位">
                <el-input v-model="ProductAndSkusVo.product.unit" style="width:60%" placeholder="斤/辆/台" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" :offset="0">
              <el-form-item label="审核状态">
                <el-switch
                  v-model="ProductAndSkusVo.product.verifyStatus"
                  :active-value="1"
                  :inactive-value="0"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="是否上架">
                <el-switch
                  v-model="ProductAndSkusVo.product.publishStatus "
                  :active-value="1"
                  :inactive-value="0"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" :offset="0">
              <el-form-item label="缩略图">
                <el-upload
                  class="avatar-uploader"
                  action="/lejuAdmin/material/uploadFileOss"
                  :headers="{ token }"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                >
                  <img v-if="ProductAndSkusVo.product.pic" :src="ProductAndSkusVo.product.pic" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <div>其他信息</div>
          <el-divider />
          <el-row :gutter="20">
            <el-col :span="8" :offset="0">
              <el-form-item label="推荐状态">
                <el-switch
                  v-model="ProductAndSkusVo.product.recommendStatus"
                  :active-value="1"
                  :inactive-value="0"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="新品状态">
                <el-switch
                  v-model="ProductAndSkusVo.product.newStatus"
                  :active-value="1"
                  :inactive-value="0"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="预告商品">
                <el-switch
                  v-model="ProductAndSkusVo.product.previewStatus"
                  :active-value="1"
                  :inactive-value="0"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8" :offset="0">
              <el-form-item label="搜索关键词" label-width="90px">
                <el-input v-model="ProductAndSkusVo.product.keywords" placeholder="关键词" style="width:80%" />
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="库存预警">
                <el-input-number v-model="ProductAndSkusVo.product.lowStock" size="medium" :min="0" :max="100000" label="描述文字" />
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="商品排序">
                <el-input-number v-model="ProductAndSkusVo.product.sort" size="medium" :min="0" :max="100000" label="描述文字" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="产品服务" label-width="90px">
            <el-checkbox v-for="item in numList" :key="item.id" v-model="item.isChecked" :label="item.label" @change="numChange" />
          </el-form-item>
          <el-button v-if="step == 1" size="small" class="firstBtn" type="primary" @click="next">下一步,填写库存信息</el-button>

        </div>
        <!-- 第二部分 -->
        <div v-show="step==2" class="basic">
          <div>商品sku信息</div>
          <el-divider />
          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <el-form-item label="标题">
                <el-input v-model="ProductAndSkusVo.product.detailTitle " style="width:60%" placeholder="标题" />
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0" :pull="3">
              <el-form-item label="副标题">
                <el-input v-model="ProductAndSkusVo.product.subTitle" placeholder="副标题" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24" :offset="0" class="painting">
              <el-form-item label="画册图片" style=" display: inline-block;">
                <div v-for="(item,index) in fileList" :key="item" style=" display: inline-block; width:180px">
                  <img class="imgFive" width="100%" :src="item" alt="">
                  <span style="color:red" @click="delPicture(index)">删除</span>
                </div>
                <el-upload
                  action="/lejuAdmin/material/uploadFileOss"
                  :headers="{ token }"
                  list-type="picture-card"
                  :show-file-list="false"

                  :on-success="fiveSuccess"

                  :before-upload="beforeUpload"
                  style="width:150px; margin:0;"
                >
                  <i class="el-icon-plus" />
                </el-upload>
                <p style="font-size:12px">只能上传jpg/png文件，且不超过500kb,文件不超过5个</p>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" :offset="0">
              <el-form-item label="sku设置">
                <span v-if="colorSkuAttrs.colorAttrList.length > 0" class="pading">颜色:</span>
                <el-checkbox-group v-model="colorSkuAttrs.colorSelect" style="display:inline-block">
                  <el-checkbox v-for="item in colorSkuAttrs.colorAttrList" :key="item" :label="item">
                    {{ item }} &ensp;&ensp;<span style="color:red" @click.stop="delColor(item)">删除</span>
                  </el-checkbox>
                </el-checkbox-group>
                <el-input v-model="colorSkuAttrs.text" placeholder="颜色描述: 比如土豪金" style="width:80%" />
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item>
                <span v-if="sizeSkuAttrs.sizeAttrList.length > 0" class="pading">大小:</span>
                <el-checkbox-group v-model="sizeSkuAttrs.sizeSelect" style="display:inline-block">
                  <el-checkbox v-for="item in sizeSkuAttrs.sizeAttrList" :key="item" :label="item">
                    {{ item }}&ensp;&ensp;<span style="color:red" @click.stop="delSize(item)">删除</span>
                  </el-checkbox>
                </el-checkbox-group>
                <el-input v-model="sizeSkuAttrs.text" placeholder="内存大小" style="width:80%" />
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item>
                <el-button type="primary" size="default" @click="generateSku">生成sku表</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" :offset="0">
              <el-form-item>
                <el-button size="default" @click="generateColor">创建颜色选项</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item>
                <el-button size="default" @click="generateZise">创建大小选项</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item>
                <el-button size="default" type="primary" @click="addZise">新增sku</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- sku生成的列表 -->
          <el-table v-if="skuList.length > 0" :data="skuList" border stripe>
            <el-table-column
              type="index"
              label="#"
              fixed
              width="50"
            />
            <el-table-column
              label="图片"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                <el-upload
                  class="avatar-uploader"
                  action="/lejuAdmin/material/uploadFileOss"
                  :headers="{ token }"
                  :show-file-list="false"
                  :on-success="UploadPictures"
                  @click.native="clickSku(scope.row.tempId)"
                >
                  <img v-if="scope.row.pic" :src="scope.row.pic" class="miniAvatar">
                  <i v-else class="el-icon-plus avatar-uploader-icons" />
                </el-upload>
              </template>
            </el-table-column>
            <el-table-column
              label="颜色"
              width="150"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.color" size="mini" />
              </template>
            </el-table-column>
            <el-table-column
              width="150"
              label="大小"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.size" size="mini" />
              </template>
            </el-table-column>
            <el-table-column
              width="150"
              label="库存"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.stock" size="mini" placeholder="自定义库存" />
              </template>
            </el-table-column>
            <el-table-column
              width="150"
              label="预警库存"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.lowStock" size="mini" placeholder="预警库存" />
              </template>
            </el-table-column>
            <el-table-column
              width="150"
              label="锁定库存"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.lockStock" size="mini" placeholder="锁定库存" />
              </template>
            </el-table-column>
            <el-table-column
              width="150"
              label="sku编码"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.skuCode" size="mini" placeholder="sku编码" />
              </template>
            </el-table-column>
            <el-table-column
              width="150"
              label="价格"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.price" size="mini" placeholder="价格" />
              </template>
            </el-table-column>
            <el-table-column
              width="150"
              label="销量"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.sale" size="mini" placeholder="销量" />
              </template>
            </el-table-column>
            <el-table-column
              width="150"
              fixed="right"
              label="操作"
            >
              <template slot-scope="scope">
                <el-button size="default" style="color:red" @click="delSku(scope.row.tempId)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="btnBox">
            <el-button v-if="step == 2" size="small" class="twoBtn" @click="pre">返回上一步</el-button>
            <el-button v-if="step == 2" size="small" class="twoBtn" type="primary" @click="next">下一步,填写移动端详情</el-button>
          </div>
        </div>
        <!-- 第三部分 -->
        <div v-show="step==3" class="basic">
          <div>详情描述</div>
          <el-divider />
          <el-form-item label="商品详情">
            <el-input v-model="ProductAndSkusVo.product.detailDesc " type="textarea" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="ProductAndSkusVo.product.note " type="textarea" />
          </el-form-item>
          <el-form-item label="富文本(移动端)">
            <el-input v-model="ProductAndSkusVo.product.detailMobileHtml " type="textarea" />
          </el-form-item>
          <el-button v-if="step == 3" size="small" class="firstBtn" type="primary" @click="pre">返回上一步</el-button>
          <el-button v-if="step == 3" size="small" class="firstBtn" type="primary" @click="preservation">保存</el-button>
        </div>
      </el-form>
    </el-card>

  </div>
</template>

<script>
import UUID from 'uuidjs'
import { getToken } from '@/utils/myAuth'
import { findAllBrand, addProductAndSkus, productSkusDetail, updateProductAndSkus } from '@/api/commdity/addDetails'
import { getAllCategory } from '@/api/commdity/classification'
export default {
  name: 'Color',
  data() {
    return {
      value: '', // 下拉框临时model的值
      step: 1,
      information: { // 表单对象
        num: 0, // 计步器,
        type: []
      },
      numList: [
        {
          isChecked: false,
          label: '无忧退货',
          id: 1
        },
        {
          isChecked: false,
          label: '快速退款',
          id: 2
        }, {
          isChecked: false,
          label: '免费包邮',
          id: 3
        }
      ],
      list: [], // 商品分类下拉框
      brandList: [], // 商品品牌下拉框
      dialogImageUrl: '', // 画册图片属性
      dialogVisible: false, // 画册图片属性
      num: 0,
      colorSkuAttrs: { // sku颜色属性
        text: '',
        colorAttrList: ['金', '蓝', '绿'], // 全部颜色
        colorSelect: ['金'] // 选中颜色
      },
      sizeSkuAttrs: { // sku内存属性
        text: '',
        sizeAttrList: ['12', '24', '48'], // 全部内存
        sizeSelect: ['12', '24'] // 选中内存
      },
      fileList: [], // 保存画册图片
      tempSkuId: '', // 临时的skuid,用于确定哪个sku被点击了上传
      skuList: [], // sku列表
      numString: [],
      ProductAndSkusVo: {
        pmsSkuStockList: [], // sku列表
        product: {
          'albumPics': 'string', // 画册图片，连产品图片限制为5张，以逗号分割 ,会在移动端商品详情页展示
          'brandId': '', // 关联的 品牌id
          'brandName': '', // 品牌名称
          'description': '', // 意式极简北欧轻奢卧室电视柜高款现代北欧储物柜小户型精品家具 卧室电视柜（两门）
          // detail是进入详情页展示的内容
          'detailDesc': '', // 家具新品大赏：1件7.5折，2件7.2折，满额在享2%现金返现，超值好礼送不停！时间：11.14-11.20
          'detailMobileHtml': '', // 移动端展示方式,商品的富文本内容,放到这个字段
          'detailTitle': '', // 简野 电视柜 意式极简北欧轻奢卧室电视柜高款现代北欧储物柜小户型精品家具 卧室电视柜（两门）
          'giftGrowth': 0, // 赠送的成长值(预留)
          'giftPoint': 0, // 赠送的积分(预留)
          'keywords': '', // 关键词,逗号分割,  地中海,凳子,xxx
          'lowStock': '', // 预警库存(预留)
          'name': '', // 商品名称 简野（JIANYE）ZY-22
          'newStatus': '', // 新品状态:0->不是新品；1->新品 ,新品会在移动端首页推荐
          'note': '', // 备注,比如小舅子供货不入账 ,
          'originalPrice': '', // 原价
          'pic': '', // 封面图片
          'previewStatus': 0, // 是否为预告商品：0->不是；1->是 ,
          'price': '', // 当前价格
          'productCategoryId': '', // 分类id
          'productCategoryName': '', // 分类名称
          'productSn': '', // 商品编码,需要手填.
          // 上架状态：0->下架；1->上架 ,
          'publishStatus': 0,
          // 推荐状态；0->不推荐；1->推荐 ,
          'recommendStatus': 0,
          // 销量,不用处理
          'sale': 0,
          //  以逗号分割的产品服务：1->无忧退货；2->快速退款；3->免费包邮 ,
          'serviceIds': '', // 1,2
          'sort': '', // 排序,降序.值越大越靠前
          'stock': '', // 库存
          'subTitle': '', // 二级标题
          'unit': '', // 单位,比如 斤/辆/台
          'verifyStatus': 0, //  审核状态：0->未审核；1->审核通过 ,
          'weight': '' // 商品重量，默认为千克
        }
      }
    }
  },
  // {
  //   'stock': '', // 库存
  //  'note': '', // 备注,比如小舅子供货不入账 ,
  //  'keywords': '', // 关键词,逗号分割,  地中海,凳子,xxx,暂时没有加
  //  'detailDesc': '', // 商品详细说明,家具新品大赏：1件7.5折，
  // }
  computed: {
    token() {
      return getToken()
    }
  },
  created() {
    var id = this.$route.params.id
    if (id) {
      this.editDetail()
    }
    this.init()
  },
  mounted() {

  },
  methods: {
    editDetail() { // 编辑文章
      productSkusDetail(this.$route.params.id).then(res => {
        const { message: errMag, data, success } = res
        if (success) {
          this.ProductAndSkusVo = data
        } else {
          this.$message.error(errMag)
        }
      })
    },
    preservation() { // 新增保存
      this.ProductAndSkusVo.product.serviceIds = this.numString.join() // 更改多选框格式
      this.ProductAndSkusVo.product.albumPics = this.fileList.join() // 五张照片格式
      this.ProductAndSkusVo.pmsSkuStockList = this.skuList.map(item => { // 商品sku格式
        var items = {
          lockStock: item.lockStock,
          pic: item.pic,
          sale: item.sale,
          price: item.price,
          skuCode: item.skuCode,
          lowStock: item.lowStock,
          stock: item.stock,
          tempId: item.tempId, // JSON.stringify
          spData: JSON.stringify([
            {
              'key': '颜色',
              'value': item.color
            },
            {
              'key': '容量',
              'value': item.size
            }
          ])
        }
        return items
      })
      if (!this.$route.params.id) {
        addProductAndSkus(this.ProductAndSkusVo).then(res => {
          const { message: errMag, success } = res
          if (success) {
            this.$message.success('新增成功')
            this.$router.go(-1)
          } else {
            this.$message.error(errMag)
          }
        })
      } else {
        updateProductAndSkus(this.ProductAndSkusVo).then(res => {
          const { message: errMag, success } = res
          if (success) {
            this.$message.success('编辑成功')
            console.log(this.ProductAndSkusVo)
            this.$router.go(-1)
          } else {
            this.$message.error(errMag)
          }
        })
      }
    },
    addZise() { // 新增sku按钮,测试sku提交数据  已成功
    // spData:  [{"key":"颜色","value":"蓝色"},{"key":"容量","value":"32G"}
    },

    numChange() { // 产品服务多选框 选中输出1,2,3
      this.numList.forEach(item => {
        if (item.isChecked) {
          if (!this.numString.includes(item.id)) {
            this.numString.push(item.id)
          }
        } else {
          this.numString = this.numString.filter(ite => ite !== item.id)
        }
      })
      // var stringNum = this.numString.join()  提交时操作
      // console.log(this.numString)
    },
    // 初始化
    init() {
      getAllCategory().then(res => {
        const { data, message: errMge, success } = res
        if (success) {
          const { items } = data
          this.list = items.find(el => el.category.name === '乐居').children
        } else {
          this.$message.error(errMge)
        }
      })
      findAllBrand().then(res => {
        const { data, message: errMge, success } = res
        if (success) {
          const { items } = data
          this.brandList = items
        } else {
          this.$message.error(errMge)
        }
      })
    },

    delColor(value) { // 删除颜色选项
      this.colorSkuAttrs.colorAttrList = this.colorSkuAttrs.colorAttrList.filter(item => item !== value)
    },
    delSize(value) { // 删除内存选项
      this.sizeSkuAttrs.sizeAttrList = this.sizeSkuAttrs.sizeAttrList.filter(item => item !== value)
    },
    generateColor() { // 创建sku颜色选项
      // 把表单的输出的内容添加到全部颜色列表
      if (this.colorSkuAttrs.text.trim()) {
        var blbo = this.colorSkuAttrs.colorAttrList.includes(this.colorSkuAttrs.text)
        // if()
        if (!blbo) {
          this.colorSkuAttrs.colorAttrList.push(this.colorSkuAttrs.text)
          this.colorSkuAttrs.text = ''
        } else {
          this.$message('选项已存在')
        }
      }
    },
    generateZise() { // 创建sku内存大小选项
      if (this.sizeSkuAttrs.text.trim()) {
        var blbo = this.sizeSkuAttrs.sizeAttrList.includes(this.sizeSkuAttrs.text)
        if (!blbo) {
          this.sizeSkuAttrs.sizeAttrList.push(this.sizeSkuAttrs.text)
          this.sizeSkuAttrs.text = ''
        } else {
          this.$message('选项已存在')
        }
      }
    },
    generateSku() { // 点击生成sku表
      this.$confirm('此操作将清空sku列表,并生成新的列表, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.skuList = []
        const { sizeSelect } = this.sizeSkuAttrs
        const { colorSelect } = this.colorSkuAttrs
        sizeSelect.forEach((ele, index) => {
          colorSelect.forEach((item, inde) => {
            this.skuList.push(
              {
                color: colorSelect[inde],
                size: sizeSelect[index],
                lockStock: '', // 锁定库存
                pic: '', // 图片
                sale: '', // 销量
                price: '', // 价格
                skuCode: '', // sku的编码
                lowStock: '', // 预警库存
                stock: '', // 库存
                tempId: UUID.genV4().toString() // 临时变量,用于删除
              }
            )
          })
        })
        // console.log('111', this.skuList, this.sizeSkuAttrs)
      }).catch(() => {

      })
    },
    delPicture(index) { // 删除一张画册图片
      this.fileList.splice(index, 1)
      console.log(this.fileList)
      // var ss = this.fileList.join()
    },
    fiveSuccess(res, file) { // 画册图片.限制五张
      const { success, data, message: errMag } = res
      if (success) {
        const { fileUrl } = data
        this.$message.success('上传成功')
        if (this.fileList.length < 2) {
          this.fileList.push(fileUrl)
        } else {
          this.$message.warning('最多上传2张图片')
        }
      } else {
        this.$message.error(errMag)
      }
    },
    beforeUpload(file) { // 限制画册格式和大小
      const isJPG = /image\/(jpeg|png)/g
      var format = isJPG.test(file.type)
      const isLt2M = file.size / 1024 / 1024 < 200

      if (!format) {
        this.$message.error('上传头像图片只能是 JPG 格式或 PNG!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 500kb!')
      }
      return format && isLt2M
    },

    // handleExceed(files, fileList) { // 限制提醒
    //   this.$message.warning(`当前限制选择 5 个文件，您共选择了 ${files.length + fileList.length} 个文件`)
    // },

    handleAvatarSuccess(res, file) { // 缩略图
      // this.ProductAndSkusVo.product.pic = URL.createObjectURL(file.raw)
      // console.log(this.ProductAndSkusVo.product.pic)
      const { success, data, message: errMag } = res
      if (success) {
        const { fileUrl } = data
        this.$message.success('上传成功')
        this.ProductAndSkusVo.product.pic = fileUrl
        console.log(this.ProductAndSkusVo.product.pic)
      } else {
        this.$message.error(errMag)
      }
    },
    delSku(id) { // 删除一列sku
      var item = this.skuList.find(el => el.tempId === id)
      var index = this.skuList.findIndex(el => el === item)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.skuList.splice(index, 1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    pre() { // 上一步
      if (this.step > 1) {
        this.step--
      }
    },
    classification() { // 商品分类下拉框改变时触发
      this.ProductAndSkusVo.product.productCategoryName = this.list.find(ele => ele.id === this.ProductAndSkusVo.product.productCategoryId).name
    },
    brandChange() { // 商品品牌下拉框改变时触发
      this.ProductAndSkusVo.product.brandName = this.brandList.find(ele => ele.id === this.ProductAndSkusVo.product.brandId).name
    },
    next() { // 下一步
      // 保存分类名称
      if (this.step < 3) {
        this.step++
      }
    },
    clickSku(id) {
      this.tempSkuId = id
      // console.log(this.tempSkuId)
    },
    UploadPictures(res, file) { // 上传sku图片成功函数
      var temp = this.skuList.find(ele => ele.tempId === this.tempSkuId)
      const { success, data } = res
      if (success) {
        const { fileUrl } = data
        temp.pic = fileUrl
        console.log(temp.pic)
      }
    }
  }

}
</script>

<style scoped lang="scss">
    .details{
        .step{
            width: 60%;
            margin: 0 auto;
            font-size: 16px;
            margin-bottom: 30px;
        }
        .painting{
          display: flex;
          .imgFive{
          width: 120px;
          height: 120px;
          display: inline-block;
        }
        }

        .card{
            margin: 30px;
            .basic{
                .firstBtn{
                    margin: 0 auto;
                    margin-top:30px;
                    display: block;
                }
               .btnBox{
                   display: flex;
                   margin-top:30px;
                   justify-content: center;
               }
            }
        }
           .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
   .avatar-uploader-icons {
    font-size: 28px;
    color: #8c939d;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .miniAvatar {
    width: 100px;
    height: 100px;
    display: block;
  }
    .pading{
        display: inline-block;
        margin-right:10px;
    }
    }
</style>
